<template>
    <el-container class="layout-container-demo">
      <el-aside width="220px" class="sidebar">
        <el-scrollbar>
          <el-menu :default-openeds="['1', '3']" class="custom-menu" :router="true">
            <el-sub-menu index="1">
              <template #title>
                <el-icon><ShoppingCartFull/></el-icon>订单管理
              </template>
              <el-menu-item-group>
                <template #title>组 1</template>
                <el-menu-item index="/managercommodity">商品订单管理</el-menu-item>
                <el-menu-item index="/managerrefundcommodity">退款订单管理</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="组 2">
                <el-menu-item index="/managerpendingshipment">待发货订单管理</el-menu-item>
                <el-menu-item index="/manageralreadyshipped">已发货订单管理</el-menu-item>
                <el-menu-item index="/managerSignedFor">已签收订单管理</el-menu-item>
                <el-menu-item index="/managerReturningGoods">退货中订单管理</el-menu-item>
                <el-menu-item index="/managerReturned">已退货订单管理</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>
  
            <el-sub-menu index="2">
              <template #title>
                <el-icon><Goods/></el-icon>商品管理
              </template>
                <el-menu-item index="/managerproducttable">商品管理</el-menu-item>
            </el-sub-menu>
  
      


            <el-sub-menu index="3">
              <template #title>
                <el-icon><Shop/></el-icon>店铺管理
              </template>
              <el-menu-item-group>
                <el-menu-item index="/managershop">店铺管理</el-menu-item>
                <el-menu-item index="/managerpendingreviewshop">待审核店铺</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>

            <el-sub-menu index="4">
              <template #title>
                <el-icon><Van/></el-icon>车辆管理
              </template>
                <el-menu-item index="/managercar">车辆管理</el-menu-item>
                <el-menu-item index="/managerneartermmaintenancerequired">待保养车辆</el-menu-item>
          
            </el-sub-menu>
            <el-sub-menu index="5">
              <template #title>
                <el-icon><Files/></el-icon>报表管理
              </template>
                <el-menu-item index="/report">报表管理</el-menu-item>
            </el-sub-menu>

          </el-menu>
        </el-scrollbar>
      </el-aside>
  
      <el-container>
        <el-header class="header">
          <div class="toolbar">
            <img :src="imager" alt="Avatar" class="avatar" />
            <span class="username">欢迎使用</span>

            
            <el-dropdown>
              <el-button type="primary" circle>
                <el-icon><setting /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>
  
        <el-main>
          <el-scrollbar>
            <router-view />
          </el-scrollbar>
        </el-main>
      </el-container>
    </el-container>
  </template>
  
  <script>
  export default {
    data() {
      return {
        imager: 'https://daiyuanping888.oss-cn-chengdu.aliyuncs.com/ddf7a29d-eac9-4b2b-a3d2-595fc64246af.jpg',
      };
    },
    methods: {
      handleLogout() {
        this.$router.push('/userlogin');
      },
    },
    mounted() {
      this.observer = new ResizeObserver(entries => {
        requestAnimationFrame(() => {
          for (let entry of entries) {
            console.log('Size changed:', entry.contentRect);
          }
        });
      });
      this.observer.observe(this.$el);
    },
    beforeDestroy() {
      if (this.observer) {
        this.observer.disconnect();
      }
    },
  };
  </script>
  
  <style scoped>
  .layout-container-demo {
    border: 1px solid #eaeaea;
    height: 100vh;
    display: flex;
  }
  
  .sidebar {
    background-color: #ffffff;
    border-right: 1px solid #eaeaea;
  }
  
  .custom-menu {
    background-color: #f5f7fa;
  }
  
  .el-menu-item,
  .el-sub-menu__title {
    font-size: 14px;
    color: #333;
  }
  
  .el-menu-item:hover {
    background-color: #e6f7ff;
    color: #007bff;
  }
  
  .el-sub-menu__title:hover {
    background-color: #e6f7ff;
  }
  
  .header {
    text-align: right;
    background-color: #007bff;
    color: #fff;
    padding: 10px;
  }
  
  .toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 10px;
  }
  
  .username {
    margin-right: 10px;
  }
  
  @media (max-width: 768px) {
    .sidebar {
      display: none;
    }
  
    .layout-container-demo {
      flex-direction: column;
    }
  
    .header {
      text-align: left;
    }
  }
  </style>